<!DOCTYPE html>
<html lang="en">
<head>
  <th:block th:include="include :: header('编辑分类')" />
  <style type="text/css">
    body {
      background-color: #ffffff;
    }
  </style>
</head>
<body>
<input th:value="${roleId}" id="roleId" type="hidden"/>
<div class="layui-form">
  <div class="layuimini-form" style="height: 400px;overflow-y:auto">
    <div class="layui-form-item">
      <label class="layui-form-label required">角色名称</label>
      <div class="layui-input-block">
        <input name="roleName" th:value="${role.roleName}" lay-verify="required" lay-reqtext="角色名称不能为空" placeholder="请输入角色名称" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label required">权限字符</label>
      <div class="layui-input-block">
        <input name="roleSign" th:value="${role.roleSign}" lay-verify="required" lay-reqtext="权限字符不能为空" placeholder="请输入权限字符" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label required">显示顺序</label>
      <div class="layui-input-block">
        <input name="roleSort" th:value="${role.roleSort}" lay-verify="required" lay-reqtext="显示顺序不能为空" placeholder="请输入显示顺序" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">角色状态</label>
      <div class="layui-input-block">
        <input type="radio" name="status" value="1" title="开启" th:checked="${role.status == 1}">
        <input type="radio" name="status" value="-1" title="关闭" th:checked="${role.status == -1}">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <input name="remark" th:value="${role.remark}" placeholder="请输入备注" value="" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">角色权限</label>
      <div class="layui-input-block">
        <div id="roleMenuIds" style="border: 1px solid #e5e6e7;" name="roleMenuIds"></div>
      </div>
    </div>
  </div>

  <div class="layui-form-item" style="margin: 25px 10px;position:absolute;bottom: 0;right: 5%;">
    <div class="layui-input-block">
      <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
      <button type="button" class="layui-btn layui-btn-primary" onclick="javascript:parent.layer.close(parent.layer.getFrameIndex(window.name));">取消</button>
    </div>
  </div>
</div>

</body>
<th:block th:include="include :: footer" />
<script type="text/javascript">

  layui.use(['tree','form'],function (){
    var tree = layui.tree;
    var form = layui.form;
    var $ = layui.jquery;


    //模拟数据
    var roleMenuTree = tree.render({
      id: "roleMenuIds",
      elem: '#roleMenuIds',  //绑定元素
      showCheckbox: true, //是否显示复选框
      icon: 'layui-icon layui-icon-form',
      data: queryRoleInfo()
    })


    function queryRoleInfo(){
      var data;
      var roleId = $("#roleId").val();
      $.ajax({
        url: '/role/admin/queryRoleInfo',
        type: "get",
        async: false,
        data: {
          "roleId": roleId
        },
        success(res) {
          if (res.state) {
            data = res.data.menuTree;
          }
        },
        error(res) {
          console.log(res);
        }
      })
      return data;
    }

    form.on('submit(saveBtn)', function (obj) {
      console.log(tree)
      var checkData = tree.getChecked('roleMenuIds');
      const data = {
        roleId: $("#roleId").val(),
        roleName: obj.field.roleName,
        roleSign: obj.field.roleSign,
        roleSort: obj.field.roleSort,
        status: obj.field.status,
        remark: obj.field.remark,
        menuIds: Pt.getLayTreeCheckedId(checkData)
      }
      updateRole(data);
    })
  })

  function updateRole(data){
    $.ajax({
      url: "/role/admin/updateRole",
      dataType: "json",
      contentType: "application/json",
      type: "post",
      data: JSON.stringify(data),
      success(res) {
        if (res.state){
          Pt.showMsg("修改成功");
          parent.layui.table.reload('currentRoleTable');
          parent.layer.closeAll();
        }
      },
      error(res) {
        console.log(res);
      }
    })
  }

</script>
</html>